<template>
  <div class="songListItem">
    <ul>
      <li v-for="playlist in  playlists">
        <a href="">
          <img :src="playlist.coverImgUrl" alt="">
          <div class="nickname">{{playlist.creator.nickname}}</div>
          <div class="playCount">{{playlist.playCount>=100000?(Math.floor(playlist.playCount/10000)+'万'):playlist.playCount}}</div>
        </a>
        <div class="name">{{playlist.name}}</div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {}
    },
    props: {
      playlists: {
        type: Array
      }
    }
  }
</script>

<style>
  .songListItem li{
    float: left;
    width: 49.5%;
  }
  .songListItem li>a{
    position: relative;
    display:inline-block
  }
  .songListItem li:nth-child(2n-1){
    margin-right: 1%;
  }
  .songListItem li img{
    width: 100%;
  }
  .songListItem div{
    color: #fff;
    font-size: 1.2rem;
  }
  .songListItem .nickname{
    position: absolute;
    bottom: 0;
    left: 0.5rem;
  }
  .songListItem .playCount{
    font-size: 1rem;
    position: absolute;
    top: 0;
    right: 0.5rem;
  }
  .songListItem .name{
    color: #000;
    padding-left: 0.5rem;
    word-wrap:break-word;
  }
</style>